<template>
  <div>
    <h2>表单</h2>
    <!-- 组件：el-form
       el-form:整个表单
          label-width:默认是0
          el-form-item：一个表单项
               label:标题

     表单验证
      前端条件：所有的表单元素都完成了v-model值的绑定
        基本表单验证
            1：el-form
                   model:整 个表单元素的值，它是一个对象
                   rules:规则（整个表单的规则），它是一个对象
                   rules：{
                      prop的值:[
                         {required:true,message:'错误信息',trigger:'blur/change'},
                         {min:最小长度,max:'最大长度',message:'错误信息',trigger:'blur/change'},
                         {pattern:正则,message:'错误信息',trigger:'blur/change'}
                      ]

                   }
            2：el-form-item
                   prop:它的值就是表单元素绑定的字段名

        全局表单验证
           1:el-form ref="form"
           2:
              this.$refs.form.validate((result)=>{
                result:boolean
                    true:验证通过
                    false:验证失败
              })

        局部表单验证
          1:el-form  ref="form"
          2:this.$refs.form.validateField(['prop的值'],(errorMessage)=>{
            errorMessage:值为空，说明验证通过了。有错误信息说明验证不通过
          })

        自定义表单验证
          rules：{
            prop的值:[
            {required:true,message:'错误信息',trigger:'blur/change'},
            {min:最小长度,max:'最大长度',message:'错误信息',trigger:'blur/change'},
            {pattern:正则,message:'错误信息',trigger:'blur/change'},
            {
                validator:(rule,value,callback)=>{
                    rule:当前项的规则，几乎不用
                    value：当前验证项的值
                    callback:
                       验证成功：callback()
                       验证失败：callback(new Error('错误信息'))
                }
            }
            ]
          }

     -->
    <el-form ref="form" label-width="100px" :model="form" :rules="rules">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
      </el-form-item>
    </el-form>
    <hr>
    <hr>
    <h3>手机验证码登录</h3>
    <el-form ref="form2" label-width="100px" :model="form2" :rules="rules2">
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="form2.mobile" />
        <el-button type="primary" @click="getCode">获取验证码</el-button>
      </el-form-item>
      <el-form-item label="验证码" prop="code">
        <el-input v-model="form2.code" />
      </el-form-item>
      <el-button @click="submit2">提交</el-button>
    </el-form>

    <Son ref="son" />
    <el-button
      type="primary"
      @click="btnClick"
    >调用son组件内的validate</el-button>
  </div>
</template>
<script>
import Son from './components/son'
export default {
  components: {
    Son
  },
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      form2: {
        mobile: '',
        code: ''
      },
      rules2: {
        mobile: [
          { required: true, message: '必填', trigger: 'change' },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '请正确输入手机号',
            trigger: 'change'
          }
        ],
        code: [
          { required: true, message: '必填', trigger: 'change' },
          {
            min: 4,
            max: 4,
            message: '请输入四位验证码',
            trigger: 'change'
          },
          {
            validator: (rule, value, callback) => {
              if (value === '1234') {
                callback()
              } else {
                callback(new Error('验证码错误'))
              }
            },
            trigger: 'change'
          }
        ]
      },
      rules: {
        username: [
          {
            required: true,
            message: '必填',
            trigger: 'change'
          },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '请正确输入手机号',
            trigger: 'change'
          }
        ],
        password: [
          {
            required: true,
            message: '必填',
            trigger: 'change'
          },
          {
            min: 6,
            max: 12,
            message: '请输入6-12位密码',
            trigger: 'change'
          }
        ]
      }
    }
  },
  methods: {
    btnClick() {
      this.$refs.son.validate()
    },
    submit() {
      this.$refs.form.validate((result) => {
        console.log(result)
      })
    },
    // 局部表单验证
    getCode() {
      this.$refs.form2.validateField(['mobile'], (errorMessage) => {
        // errorMessage:有值就是验证不通过，为空说明验证通过了
        if (errorMessage === '') {
          console.log('验证通过了')
        } else {
          console.log('验证失败')
        }
      })
    },
    submit2() {
      this.$refs.form2.validate((result) => {
        console.log(result)
      })
    }
  }
}
</script>
<style></style>
